<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="base/layout.html">
<!-- start: Content -->
<div layout:fragment="content" class="main sidebar-minified">

    <div class="row">
        <div class="col-lg-12">
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="index.html">首页</a></li>
                <li><i class="fa fa-table"></i>教师管理</li>
            </ol>
        </div>
    </div>

    <!-- 查询信息 -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2><i class="fa fa-search"></i><span class="break"></span><strong>查询信息</strong></h2>
                </div>
                <div class="panel-body">
                    <form th:action="@{/teachers/search}" method="get" class="form-inline" id="searchForm">
                        <div class="form-group mx-sm-3 mb-2">
                            <label for="name" class="sr-only">姓名</label>
                            <input type="text" class="form-control" id="name" placeholder="姓名" name="name" th:value="${param.name}">
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <label for="phoneNumber" class="sr-only">电话</label>
                            <input type="text" class="form-control" id="phoneNumber" placeholder="电话" name="phoneNumber" th:value="${param.phoneNumber}">
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <label for="subject" class="sr-only">职业</label>
                            <select class="form-control" id="subject" name="subject">
                                <option value="">请选择科目</option>
                                <option value="物理" th:selected="${param.subject == '物理'}">物理</option>
                                <option value="数学" th:selected="${param.subject == '数学'}">数学</option>
                                <option value="化学" th:selected="${param.subject == '化学'}">化学</option>
                                <option value="英语" th:selected="${param.subject == '英语'}">英语</option>
                                <option value="语文" th:selected="${param.subject == '语文'}">语文</option>
                                <option value="体育" th:selected="${param.subject == '体育'}">体育</option>
                            </select>
                        </div>
                        <button id="submitBtn" type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> 查询</button>
                        <button type="button" class="btn btn-danger mb-2" onclick="resetForm()">重置</button>
                    </form>
                </div>
            </div>
        </div><!--/col-->
    </div><!--/row-->

    <!-- 教师管理 -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2><i class="fa fa-table red"></i><span class="break"></span><strong>教师管理</strong></h2>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>工资</th>
                            <th>职业</th>
                            <th>电话</th>
                            <th>附件</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="teacher, userStat : ${teacherList}">
                            <td th:text="${userStat.index + 1}"></td>
                            <td th:text="${teacher.name}"></td>
                            <td th:text="${teacher.money}"></td>
                            <td th:text="${teacher.subject}"></td>
                            <td th:text="${teacher.phoneNumber}"></td>
                            <td>
                                <span th:if="${teacher.attachmentName != null}">
                                    <a th:href="@{/teachers/downloadFile(fileName=${teacher.attachmentName},originalFileName=${teacher.attachmentName})}"
                                       class="btn btn-xs btn-primary">
                                        <i class="fa fa-download"></i> 下载
                                    </a>
                                    <a href="javascript:void(0)"
                                       th:onclick="'deleteFile(\'' + ${teacher.attachmentName} + '\', ' + ${teacher.id} + ')'"
                                       class="btn btn-xs btn-danger">
                                        <i class="fa fa-trash"></i> 删除
                                    </a>
                                </span>
                                <span th:if="${teacher.attachmentName == null}">无附件</span>
                            </td>
                            <td>
                                <a class="btn btn-success" th:onclick="'layerOpen(\'toDetail?id=' + ${teacher.id} + '\')'">
                                    <i class="fa fa-search-plus"></i>
                                </a>
                                <a class="btn btn-info" th:href="@{../teachers/toUpdate(id=${teacher.id})}">
                                    <i class="fa fa-edit"></i>
                                </a>
                                <a class="btn btn-danger" th:onclick="'deleteTeacher(' + ${teacher.id} + ')'">
                                    <i class="fa fa-trash-o"></i>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div th:replace="base/pagination :: pagination('teacher')"></div>
                </div>
            </div>
        </div><!--/col-->
    </div><!--/row-->

    <script>
        function deleteTeacher(id) {
            layer.confirm('确定要删除这位教师吗？', {
                btn: ['确定','取消']
            }, function(){
                $.ajax({
                    url: 'delete',
                    type: 'GET',
                    data: {id: id},
                    success: function (response) {
                        layer.msg("删除成功!");
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        layer.msg("删除失败，请稍后重试");
                    }
                });
            });
        }

        function resetForm() {
            // 清空输入框
            document.getElementById('name').value = '';
            document.getElementById('phoneNumber').value = '';
            document.getElementById('subject').value = '';

            // 提交表单
            document.getElementById('searchForm').submit();
        }
    </script>

</div>
<!-- end: Content -->
</html>